<template>
  <div class="full-screen-div">
    <HeaderComponent @goBack="goBack" title="申请" />
    <div v-if="passDatas!=null" class="container">
      <div v-for="(item, index) in passDatas" :key="index">
        <Tag :passData="item"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import Tag from '../../component/Tag.vue'; // 确保路径正确
import HeaderComponent from '../../component/Header.vue'; // 确保路径正确
import router from '../../router/index.js'; // 确保路径正确

const goBack = () => {
  router.push('/betch'); // 返回主页
};

let iconSrc = "src/assets/applicationIcon/ze-bookmark.png"; // 确保路径正确
const passDatas = [
  {
    iconSrc: iconSrc,
    applicationName: '申请类型',
    applicationPath: '/applicationType'
  }, {
    iconSrc: iconSrc,
    applicationName: '申请记录',
    applicationPath: '/applicationRecordsList'
  }
];
</script>

<style scoped>
.full-screen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #E1EFFF;
  display: flex;
  flex-direction: column;
}

.header {
  height: 8vh;
  width: 100%;
  background-color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back {
  position: absolute;
  left: 0;
  top: 3vh;
  border: none;
  font-size: 24px;
  background: transparent;
}

.title {
  position: relative;
  top: 1vh;
}

.container {
  flex-grow: 1;
  /* 使容器填充剩余空间 */
  margin-top: 10px;
  /* 在 header 和 container 之间留出一些空间 */
  padding: 10px;
  /* 内边距，使内容不贴边 */
  /* background-color: white; */
  /* 背景颜色 */
  overflow-y: auto;
  /* 如果内容过多，允许滚动 */
}
</style>